<template>
        <div v-if="props.chartInfo == null">
          未配置
        </div>
        <div v-else-if="props.chartInfo.type == 'table'">
          <el-table :data="chartData">
            <el-table-column type="index" width="55" align="center" />
            <el-table-column :label="c.name" align="center" :prop="c.code" v-for="(c,i) in columns" :key="i">
              <template #default="scope">
                <dict-tag :options="dev_dataset_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else :class="className" :style="{height:height,width:width}" ref="chartDiv" />  
</template>

<script setup>
import * as echarts from 'echarts';
import('echarts/theme/macarons') // echarts theme
//import resize from './mixins/resize'
import { queryDs } from "@/api/dev/dataset";

const { proxy } = getCurrentInstance();

const chart = ref(null);
const chartData = ref(null);
const columns = ref([]);

const props = defineProps({
  // 数据
  chartInfo: {
    type: Object,
    default: null,
  },
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  }
});

watch(() => props.chartInfo, val => {
  if(val){
    if(chart.value != null){
      chart.value.dispose();
    }
    loadData();
  }else{

  }
},{ deep: true, immediate: true });

/** 加载数据 */
function loadData(){
  queryDs({code:props.chartInfo.dsCode}).then(response=>{
    chartData.value = response.data;
    initChart();
  })
}

/** 报表初始化入口 */
function initChart() {
  chart.value = echarts.init(proxy.$refs.chartDiv, 'macarons')
  if(props.chartInfo && props.chartInfo.type == 'bar'){
    setBarChart();
  }else if(props.chartInfo && props.chartInfo.type == 'line'){
    setLineChart();
  }else if(props.chartInfo && props.chartInfo.type == 'raddar'){
    setRaddarChart();
  }else if(props.chartInfo && props.chartInfo.type == 'gauge'){
    setGaugeChart();
  }else if(props.chartInfo && props.chartInfo.type == 'pie'){
    setPieChart();
  }else if(props.chartInfo && props.chartInfo.type == 'cust'){
    setCustChart(chartData.value);
  }else if(props.chartInfo && props.chartInfo.type == 'table'){
    setTableChart();
  }else{
    proxy.$modal.msgError("不支持报表类型");
  }
}

/** 生成列表 */
function setTableChart() {
  let dataOption = JSON.parse(props.chartInfo.dataOption);
  let cols = [];
  for( let f in dataOption){
    cols.push({code:f, label:dataOption[f]});
  }
  columns.value = cols;
}

/** 自定义图表 */
function setCustChart(data){
  let option = {};
  eval(props.chartInfo.dataOption);
  console.log(option)
  chart.value.setOption(option)
}

/** 仪表盘 */
function setGaugeChart(){
  let options = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}'
        },
        data: [
          {
            value: 50
          }
        ]
      }
    ]
  }
  options.series[0].name = props.chartInfo.name;
  
  options.series[0].data[0].value = chartData.value;
  chart.value.setOption(options)
}

/** 雷达图 */
function setRaddarChart(){
  let options = {
    legend: {
      data: ['raddar1']
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'raddar1'
          }
        ]
      }
    ]
  }
  
   chartData.value.forEach(e=>{
    options.radar.indicator.push({max:e.maxs, name:e.label});
    options.series[0].data.push(e.value);
  })
  chart.value.setOption(options)
}

/** 折线图 */
function setLineChart(){
  let options = {
    xAxis: {
      data: [],
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {},
    series: [
      {
        data: [],
        type: 'line'
      }
    ]
  }
  
  chartData.value.forEach(e=>{
    options.xAxis.data.push(e.label);
    options.series[0].data.push(e.value);
  })
  chart.value.setOption(options)
}

/** 柱状图 */
function setBarChart(){
   let options = {
    xAxis: {
      data: [],
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {},
    series: [
      {
        data: [],
        type: 'bar'
      }
    ]
  }
  
  chartData.value.forEach(e=>{
    options.xAxis.data.push(e.label);
    options.series[0].data.push(e.value);
  })
  chart.value.setOption(options)
}


/** 饼图 */
function setPieChart(){
   let options = {
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    legend: {},
    series: [
      {
        data: [],
        type: 'pie'
      }
    ]
  }  
  chartData.value.forEach(e=>{
    options.series[0].data.push({value:e.value, name:e.label});
  })
  chart.value.setOption(options)
}
</script>
